<%--
  Created by IntelliJ IDEA.
  User: kkk
  Date: 2022/8/19
  Time: 8:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <base href="${pageContext.request.contextPath}/">
    <style>
        div {
            /*margin-left: 200px;*/
            /*text-align: center;*/
        }

        h2 {
            padding-left: 150px;
        }

    </style>
</head>
<body>
<div>
    <h2>宠物的基本信息</h2>
    <form action="AddServlet" method="post">
        昵称：<input type="text" class="name" name="name" onblur="checkName(this.value)"><br><br>
        品种：
        <select class="breed" name="breed" id="">
            <option value="0">--请选择--</option>
            <option value="1">狗</option>
            <option value="2">猫</option>
            <option value="3">鸟</option>
            <option value="4">兔</option>
        </select><br><br>
        性别：
        <input type="radio" name="sex" value="1">雄
        <input type="radio" name="sex" value="2">雌 <br><br>
        出生日期：<input type="text" class="birthday" name="birthday">yyyy-MM-dd <br><br>
        宠物描述：<input type="text" class="description" name="description" style="width: 400px;height: 50px;"><br><br>
        <input type="submit" value="提交" style="margin-left: 200px">
        <input type="button" value="重置">
    </form>
</div>
</body>
<script>
    $("form").submit(function () {
        var veg = /^\d{4}-\d{2}-\d{2}$/;
        if ($('.name').val() == "") {
            alert("昵称不能为空！");
            return false;
        } else if ($('.birthday').val() == "") {
            alert("出生日期不能为空！");
            return false;
        } else if (!veg.test($('.birthday').val())) {
            alert("出生日期格式不正确");
            return false;
        }
        let isName = true;
        $.ajax({
            url: "CheckNameServlet",
            type: "get",
            data: "name=" + $('.name').val(),
            async: false,
            success: function (data) {
                if (data == "true") {
                    alert("昵称已存在");
                    isName = false;
                }
            }
        })
        return isName;
    })
</script>
</html>
